<template>
    <Drawer :class-name="className" v-bind="$attrs" v-on="$listeners">
        <template v-if="$slots.header" slot="header">
            <slot name="header"/>
        </template>

        <div class="content-wrap" :style="{height: footerSlotExists ? 'calc(100% - 50px)' : '100%'}">
            <slot/>
        </div>

        <div class="footer-wrap" v-if="footerSlotExists">
            <slot name="footer"/>
        </div>
    </Drawer>
</template>

<script>
    export default {
        name: 'DrawerLayout',

        computed: {
            footerSlotExists (){
                return this.$isNotEmpty(this.$slots['footer']);
            },

            className (){
                return 'common-layout-drawer ' + (this.$attrs['class-name'] || '');
            }
        }
    }
</script>

<style lang="scss">
    .common-layout-drawer {
        & .ivu-drawer-body{
            & > .content-wrap{
                padding: 15px;
                overflow: auto;
            }
            & > .footer-wrap{
                height: 50px;
                display: flex;
                align-items: center;
                justify-content: center;
                box-sizing: border-box;
                border-top: 1px solid #e8eaec;
                padding: 0 15px;
                background-color: #f3f3f3;
                & button{
                    width: 120px;
                }
            }
        }
    }
</style>